<!--
 @Description 新闻列表组件-图文混排-大视样式
 @author gaohailan
 @date 2022/11/25
-->
<template>
  <section class="news-list-style-seven">
    <section class="item-center">
      <van-image
        v-show="isShowImg"
        :src="setImgPath(getMapping(item, 'videoBigCoverImgId'), getMapping(item, 'videoBigCoverImgIdUrl'))"
        :fit="imgType"
      >
        <template>
          <section class="play-time-icon">
            <span v-if="item.param3 >0">{{ getTime(item.param3) }}</span>
          </section>
        </template>
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
        <template v-slot:error>
          <img
            src="../../images/base/error-icon.png"
            alt
          >
        </template>
      </van-image>

    </section>
    <section class="item-top">
      <section class="left-title etc3">{{ getMapping(item, 'mainTitle') || "" }}</section>
    </section>
    <section class="item-bottom">
      <section class="left-txt">
        <span>{{ getMapping(item, 'publishTime') | newFormatTime }}</span>
        <img v-if="item.audioId" src="./images/news-audio.png" alt="">
      </section>
    </section>
  </section>
</template>
<script>
import mixins from '../mixins'

export default {
  name: 'NewsListStyleSeven',
  mixins: [mixins],
  // components: { EmptyPage },
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    position: {
      type: Number,
      default() {
        return 1
      }
    },
    option: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      imgList: [],
      videoPlayer: '', // video.js实例对象
      isShowImg: true,
      playV: null,
      timeLog: '00:00'
    }
  },
  created() {
    if (this.item.videoBigCoverImgId) {
      this.imgList = this.item.videoBigCoverImgId.split(',')
    }
    // this.initVideo()
  },
  methods: {
    // 用户输入任意秒数, 函数计算该毫秒数对应的时分秒, 并返回
    getTime(time) {
      // 转换为式分秒
      let h = parseInt(time / 60 / 60 % 24)
      h = h < 10 ? '0' + h : h
      let m = parseInt(time / 60 % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(time % 60)
      s = s < 10 ? '0' + s : s
      // 作为返回值返回 h + ":" +
      return m + ':' + s
    },
    handlePlay() {
      this.isShowImg = false
      this.videoPlayer.play()
    },
    handlepause() {
      this.videoPlayer.pause()
    },
    initVideo() {
      const _this = this
      if (this.videoPlayer) {
        this.videoPlayer.dispose() // 重置 video
        this.videoPlayer = null
      }
      this.$nextTick(() => {
        this.videoPlayer = new Aliplayer({
          id: 'courseVideoContainer' + _this.item.showType,
          autoplay: false,
          source: _this.item.videoIdUrl,
          format: 'm3u8',
          keyShortCuts: true,
          keyFastForwardStep: 15,
          useH5Prism: true,
          width: '100%',
          height: '100%',
          skinLayout: [
            { name: 'bigPlayButton', align: 'blabs', x: '40%', y: '45%' },
            { name: 'H5Loading', align: 'cc' },
            { name: 'errorDisplay', align: 'tlabs', x: 0, y: 0 },
            { name: 'infoDisplay' },
            { name: 'tooltip', align: 'blabs', x: 0, y: 56 },
            { name: 'thumbnail' },
            {
              name: 'controlBar', align: 'blabs', x: 0, y: 0,
              children: [
                { name: 'progress', align: 'blabs', x: 0, y: 44 },
                { name: 'playButton', align: 'tl', x: 15, y: 12 },
                { name: 'timeDisplay', align: 'tl', x: 10, y: 7 },
                { name: 'fullScreenButton', align: 'tr', x: 10, y: 12 },
                // {name:"subtitle", align:"tr",x:15, y:12},
                // {name: "setting", align: "tr", x: 15, y: 12},
                { name: 'volume', align: 'tr', x: 5, y: 10 }
              ]
            }
          ],
          cover: _this.setImgPath(_this.item.videoBigCoverImgId, _this.item.videoBigCoverImgIdUrl, 1)
          // cover: _this.$setPathByOss(_this.currentPlayCourseware.subjectImg ? _this.currentPlayCourseware.subjectImg : _this.courseDetailData.courseImg, _this.currentPlayCourseware.subjectImgUrl ? _this.currentPlayCourseware.subjectImgUrl : _this.courseDetailData.courseImgUrl, 1)
        })

        this.playV = setInterval(() => {
          if (_this.videoPlayer.getDuration) {
            if (_this.playV) {
              const totalTime = _this.videoPlayer.getDuration()
              _this.timeLog = this.getTime(totalTime)
              clearInterval(_this.playV)
            }
          }
        }, 1000)
      })
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';

.news-list-style-seven {
  box-sizing: border-box;
  padding: rem(20);
  position: relative;

  .item-top {
    flex: 1;
    padding-right: rem(10);

    .left-title {
      font-size: rem(30);
      font-weight: bold;
      text-align: left;
      color: #333333;
      line-height: 1.5;
    }
  }

  .item-bottom {
    flex: 1;
    padding-right: rem(10);

    .left-txt {
      margin-top: rem(10);
      font-size: rem(22);
      font-family: PingFang SC Regular, PingFang SC Regular-Regular;
      font-weight: 400;
      text-align: left;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: space-between;

      > img {
        width: rem(49);
        height: rem(49);
      }

      > span {
        display: inline-block;
        margin-right: rem(20);
      }
    }
  }

  .item-center {
    width: 100%;
    height: rem(368);
    border-radius: rem(8);
    display: inline-block;
    margin-bottom: rem(10);
    overflow: hidden;

    .van-image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: rem(8);
      background: #c9c9c9;
      position: relative;
      overflow: hidden;

      .van-image__error {
        > img {
          width: rem(120);
          height: rem(120);
        }
      }

      .play-icon {
        position: absolute;
        width: rem(120);
        height: rem(120);
        left: 50%;
        top: 50%;
        margin-left: rem(-60);
        margin-top: rem(-60);
      }

      .play-time-icon {
        position: absolute;
        bottom: rem(10);
        right: rem(10);
        color: #fff;
        font-size: rem(20);
        display: flex;
        justify-content: center;
        align-items: center;

        > span {
          position: relative;

          &::before {
            position: absolute;
            bottom: 0;
            left: rem(-20);
            margin-top: rem(-8);
            top: 50%;
            content: '';
            display: inline-block;
            height: 0;
            width: 0;
            border-top: rem(8) solid transparent;
            border-bottom: rem(8) solid transparent;
            border-left: rem(10) solid #fff;
            border-right: rem(8) solid transparent;
          }
        }

        > img {
          width: rem(24);
          height: rem(24);
          margin-right: rem(10);
        }
      }
    }

    #courseVideoContainer {
      border-radius: rem(8);
      overflow: hidden;
    }
  }
}
</style>
